const proxy = require('http-proxy-middleware')

/*
  这里的代码是为了重写webpack的  所以代码的语法风格是 commonJS风格

  代理的本质：
    假设前端代码再端口3000 服务器端口5000
      开启api代理本质上是再开一个 3000 的服务器代码  我们请求先给这个 3000 的代理 再转给服务器，服务器把值再给代理，代理再将值给前端
        因为代理和前端的端口都是3000  所以是不会跨域的
    
    原来会跨域的本质其实请求时发送成功，服务器也把值送过来了，但是因为浏览器有同源策略，不是一个源，就会阻碍接受值，就造成了跨域
*/

module.exports = function (app) {
	app.use(
		proxy('/api1', {
			// 发送请求时遇到指定的 字符就会进行转发
			target: 'http://127.0.0.1:5000', //  需要转发到的目标服务器地址
			changeOrigin: true, // 控制服务器接收到请求头中的host字段
			/*
        当我们前端代码端口为3000时，目标服务器时5000时
          changeOrigin: true  目标服务器收到的请求头的host就是为 127.0.0.1：5000
          changeOrigin: false  目标服务器收到的请求头的host就是为 127.0.0.1：3000

        默认的配置时false  但是有时候为了避免一些不必要的错误 都是配置成true  欺骗服务器这个请求是从自己这边发的
      */
			pathRewrite: { '^/api1': '' }, //  在发哦是那个请求的时候再把 /api1转成一个空字符串  因为服务器里面是没有/api这个匹配郭泽的
		}),
		proxy('/api12', {
			target: 'http://127.0.0.1:5001',
			changeOrigin: true,
			pathRewrite: { '^/api2': '' },
		})
	)
}
